<script setup lang="ts">
import {isNullOrEmpty,initPureTableConfig} from '@/utils/functions'
import {reactive, ref} from "vue";
import {reactiveStyle, useElementTransform} from "@vueuse/motion";
import clickMap from '@/components/clickMap/marker.vue'

defineOptions({
  name: "Welcome"
});

const dialogVisible = ref(false)

const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]

const batchingColumns = [
  {label: "date", prop: "date"},
  {label: "name", prop: "name", showOverflowTooltip: true},
  {label: "address", slot: "address",},
]

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

const target = ref<HTMLElement>()

// const { transform, stop } = useElementTransform(target)

const {state, style: elementStyle} = reactiveStyle({
  opacity: 1,
})

const imgMark = ref(false)

const toggleColor = () => {
  if (state.opacity === 0)
    state.opacity = 1
  else
    state.opacity = 0
}

const states = reactive({
  loading: false
})

function onLodaing() {
  states.loading = !states.loading
}

const wh = ref(800)
</script>

<template>
  <el-card>\
    <div :style="{ height: `${wh}px`, width: `${wh}px`, position: 'relative', }">
      <clickMap>
        bbbbbbbbbbb
      </clickMap>
    </div>
    <div v-loading="states.loading" ref="target" class="w-[150px] h-[150px] bg-pink-400 transition-all duration-1000"
         :style="elementStyle"></div>
    <el-space alignment="normal">
      <el-card header="按钮">
        <el-button @click="toggleColor">Default</el-button>
        <el-button @click="toggleColor" type="primary">Primary</el-button>
        <el-button @click="toggleColor" type="success">Success</el-button>
        <el-button @click="toggleColor" type="info">Info</el-button>
        <el-button @click="toggleColor" type="warning">Warning</el-button>
        <el-button @click="toggleColor" type="danger">Danger</el-button>
        <el-button @click="wh += 100" type="primary">imgMark</el-button>

        <div class="mt-5">操作按钮</div>
        <sj-button @click="onLodaing">默认--sblue 点击loading</sj-button>
        <sj-button plain>默认--sblue</sj-button>
      </el-card>

      <el-card header="文字连接">
        <el-space>
          <el-link href="https://element-plus.org" target="_blank">default</el-link>
          <el-link type="primary">primary</el-link>
          <el-link type="success">success</el-link>
          <el-link type="warning">warning</el-link>
          <el-link type="danger">danger</el-link>
          <el-link type="info">info</el-link>
        </el-space>
        <div class="mt-5">操作链接</div>
        <sj-link>默认--sblue</sj-link>
      </el-card>
    </el-space>
    <el-space alignment="normal">
      <div class="w-[250px]">
        <el-divider>气泡</el-divider>
        <el-tooltip class="box-item" effect="dark"
                    content="Top Right prompts infoTop Right prompts infoTop Right prompts infoTop Right prompts infoTop Right prompts infoTop Right prompts infoTop Right prompts infoTop Right prompts infoTop Right prompts infoTop Right prompts infoTop Right prompts infoTop Right prompts infoTop Right prompts infoTop Right prompts infoTop Right prompts infoTop Right prompts infoTop Right prompts infoTop Right prompts infoTop Right prompts infoTop Right prompts infoTop Right prompts infoTop Right prompts infoTop Right prompts infoTop Right prompts infoTop Right prompts infoTop Right prompts infoTop Right prompts infoTop Right prompts infoTop Right prompts infoTop Right prompts infoTop Right prompts info"
                    placement="top-end">
          <el-button>tooltip气泡</el-button>
        </el-tooltip>
      </div>
      <div class="w-[250px]">
        <el-divider>弹窗</el-divider>
        <el-button type="primary" @click="dialogVisible = true">弹窗</el-button>
      </div>
      <div>
        <el-divider>输入框、select</el-divider>
        <el-input style="width: 240px" placeholder="Please input"/>
        <el-date-picker type="date" placeholder="Pick a day"/>
        <el-select clearable placeholder="Select" style="width: 240px">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
        <el-time-select style="width: 240px" start="08:30" step="00:15" end="18:30" placeholder="Select time"/>
      </div>
    </el-space>
    <div class="mt-5">
      <el-divider>详情展示</el-divider>
      <el-descriptions title="详情展示" :column="2" direction="vertical">
        <el-descriptions-item width="50%" label="Username" :span="1">kooriookami</el-descriptions-item>
        <el-descriptions-item width="50%" label="Telephone" :span="1">18100000000</el-descriptions-item>
        <el-descriptions-item width="50%" label="Place" :span="1">Suzhou</el-descriptions-item>
        <el-descriptions-item width="50%" label="Remarks" :span="1">
          <el-tag>School</el-tag>
        </el-descriptions-item>
        <el-descriptions-item width="50%" label="Address" :span="2">
          No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu ProvinceNo.1188, Wuzhong Avenue, Wuzhong District,
          Suzhou, Jiangsu Province
          No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu ProvinceNo.1188, Wuzhong Avenue, Wuzhong District,
          Suzhou, Jiangsu Provincepnpm
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="mt-5">
      <el-divider>表格</el-divider>
      <el-space alignment="normal" fill>
        <el-table :data="tableData" border>
          <el-table-column prop="date" label="Date" width="180"/>
          <el-table-column prop="name" label="Name" width="180"/>
          <el-table-column prop="address" label="Address"/>
        </el-table>
        <div>
          <pure-table border :data="tableData" :columns="initPureTableConfig(batchingColumns)">
            <template #address="{ row }">
              <div class="flex items-center">
                <div>
                  {{ isNullOrEmpty( row.address ) }}
                </div>
              </div>
            </template>
          </pure-table>
        </div>
      </el-space>
      <div class="mt-5">
        <el-pagination background :page-sizes="[100, 200, 300, 400]" layout="total,  prev, pager, next,sizes, jumper"
                       :total="400"/>
      </div>
    </div>
    <div class="mt-5">
      <el-divider>表单</el-divider>
      <el-form label-position="top" :model="form" label-width="auto">
        <el-form-item label="Activity name">
          <el-input v-model="form.name"/>
        </el-form-item>
        <el-form-item label="Activity zone">
          <el-select v-model="form.region" placeholder="please select your zone">
            <el-option label="Zone one" value="shanghai"/>
            <el-option label="Zone two" value="beijing"/>
          </el-select>
        </el-form-item>
        <el-form-item label="肥嘟嘟">
          <el-col :span="11">
            <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%"/>
          </el-col>
          <el-col :span="2" class="text-center">
            <span class="text-gray-500">-</span>
          </el-col>
          <el-col :span="11">
            <el-time-picker v-model="form.date2" placeholder="Pick a time" style="width: 100%"/>
          </el-col>
        </el-form-item>
        <el-form-item label="Instant delivery">
          <el-switch v-model="form.delivery"/>
        </el-form-item>
        <el-form-item label="Activity type">
          <el-checkbox-group v-model="form.type">
            <el-checkbox value="Online activities" name="type">
              Online activities
            </el-checkbox>
            <el-checkbox value="Promotion activities" name="type">
              Promotion activities
            </el-checkbox>
            <el-checkbox value="Offline activities" name="type">
              Offline activities
            </el-checkbox>
            <el-checkbox value="Simple brand exposure" name="type">
              Simple brand exposure
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="Resources">
          <el-radio-group v-model="form.resource">
            <el-radio value="Sponsor">Sponsor</el-radio>
            <el-radio value="Venue">Venue</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="Activity form">
          <el-input v-model="form.desc" type="textarea"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">Create</el-button>
          <el-button>Cancel</el-button>
        </el-form-item>
      </el-form>
      <el-divider>2列表单</el-divider>
      <el-form label-position="top" :model="form" label-width="auto">
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="Activity name">
              <el-input v-model="form.name"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="Activity zone">
              <el-select v-model="form.region" placeholder="please select your zone">
                <el-option label="Zone one" value="shanghai"/>
                <el-option label="Zone two" value="beijing"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="肥嘟嘟">
              <el-col :span="11">
                <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%"/>
              </el-col>
              <el-col :span="2" class="text-center">
                <span class="text-gray-500">-</span>
              </el-col>
              <el-col :span="11">
                <el-time-picker v-model="form.date2" placeholder="Pick a time" style="width: 100%"/>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="Instant delivery">
              <el-switch v-model="form.delivery"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="Activity type">
              <el-checkbox-group v-model="form.type">
                <el-checkbox value="Online activities" name="type">
                  Online activities
                </el-checkbox>
                <el-checkbox value="Promotion activities" name="type">
                  Promotion activities
                </el-checkbox>
                <el-checkbox value="Offline activities" name="type">
                  Offline activities
                </el-checkbox>
                <el-checkbox value="Simple brand exposure" name="type">
                  Simple brand exposure
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="Resources">
              <el-radio-group v-model="form.resource">
                <el-radio value="Sponsor">Sponsor</el-radio>
                <el-radio value="Venue">Venue</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="Activity form">
              <el-input v-model="form.desc" type="textarea"/>
            </el-form-item>
          </el-col>
          <el-form-item>
            <el-button type="primary">Create</el-button>
            <el-button>Cancel</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>

    <el-dialog v-model="dialogVisible" title="Tips" width="500">
      <span>This is a message</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            Confirm
          </el-button>
        </div>
      </template>
    </el-dialog>
  </el-card>
</template>

